{% extends 'bootbase.html' %}
{% load l10n %}
{% block title %}Project {{object.name}}{% endblock title %}
{% block breadcrumbs %}
<ol class="breadcrumb">
	<li class="active"><a href="{% url 'spaarwater-home' %}">{{object.name}}</a></li>
	
</ol>
{% endblock breadcrumbs %}
{% block admin_url %}project/{{object.id}}{% endblock %}
{% block script %}
{{ block.super }}
{% localize off %}
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script>
var map;
function initialize() {
    map = new google.maps.Map(document.getElementById('map'), {
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.{{maptype}}
    });
	var json = {{content|safe}};
	var bounds = new google.maps.LatLngBounds();
	var infowindow = new google.maps.InfoWindow();
	var marker;
	json.forEach(function(loc) {
   		marker = new google.maps.Marker({
   			position: new google.maps.LatLng(loc.lat,loc.lon),
			title: "Locatie "+ loc.name, 
   			map: map
   		});
   		google.maps.event.addListener(marker, 'click', (function(marker) {
	        return function() {
	          infowindow.setContent(loc.info);
	          infowindow.open(map, marker);
	        }
	      })(marker));
		bounds.extend(marker.position);
	});
	map.fitBounds(bounds);
}
$(function(){initialize();});
</script>
{% endlocalize %}
{% endblock %}

{% block content %}
<div class="container">

<div class="row-fluid">
<div class="col-md-6"><h3>{{object.name}}</h3>{{object.description|safe}}</div>
<div class="col-md-6" id="map" style="height: 280px"></div>
</div>
<div class="row-fluid">
<div class="col-md-6">&nbsp;</div>
<div class="col-md-6">&nbsp;</div>
</div>

<table class="table">
<tr>
<th>Dashboard</th>
<th colspan="2">Volume (m3)</th>
<th colspan="2">EC (dS/m)</th>
</tr>
<tr>
<td></td>
<td>In (totaal)</td>
<td>Uit (totaal)</td>
<td>In (gem)</td>
<td>Uit (gem)</td>
</tr>
{% for location,v in summary.items %}
<tr>
<td><a href="{{location}}">{{location}}</a></td>
<td>{{v.debiet.in|floatformat:0}}</td>
<td>{{v.debiet.out|floatformat:0}}</td>
<td>{{v.ec.in|floatformat:0}}</td>
<td>{{v.ec.out|floatformat:0}}</td>
</tr>
{% endfor %}
</div>
{% endblock content %}
